<style type="text/css">
  @import url('map.css');
  @import url('../stylesheets/accordion.css');
  @import url('../libraries/jscrollpane/jquery.jscrollpane.css');
  @import url('../libraries/jqtransform/jqtransform.css');
  @import url('../libraries/checkbox/jquery.checkbox.css');
  @import url('../libraries/vtip/vtip.css');
  @import url('../libraries/colorbox/example4/colorbox.css');
  @import url('../libraries/showmessage/css/style.css');
  .content {
    overflow: hidden;
  }
  #submitBtn {
    float: right;
    margin-top: 20px;
  }
  .columnList li {
    width: 200px;
    float: left;
    list-style: none;
  }
  dl dt{
    font-weight: bold;
  }
  .place_gallery {
    border-top: 1px solid #CCC;
    clear: both;
    margin-top: 10px;
    padding: 0 10px;
    width: 98%;
    overflow: hidden;
    display: block;
  }
  .inputRequire {
    border: 2px solid red;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
  }
  dl dd {
    padding: 0;
    margin: 0;
  }
  .more_info_section dl{
    padding: 0 40px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .more_info_section dl dd{
    float: left;
    width: 100px;
  }
  .imageList li{
    float: left;
    margin: 0 5px;
  }
  .imageList li img{
    box-shadow: 1px 1px 5px gray;
  }
</style>
<script type="text/javascript" src="<?php echo WEB_URL;?>/libraries/jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?php echo WEB_URL;?>/libraries/jscrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="<?php echo WEB_URL;?>/javascripts/jquery.ajaxupload.3.5.js"></script>
<script type="text/javascript" src="<?php echo  WEB_URL;?>/libraries/jqtransform/jquery.jqtransform.js"></script>
<script type="text/javascript" src="<?php echo  WEB_URL;?>/libraries/checkbox/jquery.checkbox.min.js"></script>
<script type="text/javascript" src="<?php echo  WEB_URL;?>/libraries/vtip/vtip.js"></script>
<script type="text/javascript" src="<?php echo  WEB_URL;?>/libraries/colorbox/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="<?php echo  WEB_URL;?>/libraries/showmessage/js/jquery.showMessage.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var my_Marker;
var GGM;
var listener;
var COLORS =[
  ["red", "#ff0000"], 
  ["orange", "#ff8800"],
  ["green","#008000"],
  ["blue", "#000080"],
  ["purple", "#800080"]
];
var colorIndex_ = 0;

function swap_class(buttonId) {
  $("#hand_b").removeClass("selected");
  $("#shape_b").removeClass("selected");
  $("#line_b").removeClass("selected");
  $("#placemark_b").removeClass("selected");
  $("#"+buttonId).addClass("selected");
}

function stopEditing() {
  swap_class("hand_b");
  $("#path_arr").val("");
  $("#distance").val("");
  $("#area_data").val("");
  
  if(listener!=undefined){
    GGM.event.removeListener(listener);
  } 
  if(my_Marker.length>0){
    for(var i=0;i<my_Marker.length;i++){
      my_Marker[i].setMap(null);
    }
  }
}

function getColor(named) {
  return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
 
function getIcon(color) {
  var icon = new GIcon();
  icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
  icon.iconSize = new GSize(32, 32);
  icon.iconAnchor = new GPoint(15, 32);
  return icon;
}

function placeMarker() {
  swap_class("placemark_b");
  listener = GGM.event.addListener(map, 'click', function(event){
    if(my_Marker)my_Marker.setMap(null);
    if(event.latLng){
      var color = getColor(true);
      var image="http://google.com/mapfiles/ms/micons/"+color+".png";
      my_Marker = new GGM.Marker({
        position: event.latLng,
        map: map,
        icon: image,
        draggable: true
      });
      
      $(".lat").val(my_Marker.getPosition().lat());
      $(".lng").val(my_Marker.getPosition().lng());
      $(".zoom").val(map.getZoom());
      GGM.event.addListener(my_Marker, 'dragend', function(event) {
        var my_Point = my_Marker.getPosition();
        map.panTo(my_Point);
        $(".lat").val(my_Point.lat());
        $(".lng").val(my_Point.lng());
        $(".zoom").val(map.getZoom());
      }); 
    }
  });

}
function initialize() {
  GGM             = new Object(google.maps);
  geocoder        = new GGM.Geocoder();
  var my_Latlng   = new GGM.LatLng(13.77, 100.60);
  var my_mapTypeId= GGM.MapTypeId.ROADMAP;
  var my_DivObj   = $("#myMap")[0];
  var myOptions   = {
    zoom: 6,
    center: my_Latlng ,
    mapTypeId:my_mapTypeId
  };
  map = new GGM.Map(my_DivObj,myOptions);

  GGM.event.addListener(map, 'zoom_changed', function() {
    $(".zoom").val(map.getZoom());   // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
  });

}
$(function(){
  $("<script/>", {
    "type": "text/javascript",
    src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
  }).appendTo("body");

  $('#accordion-js').find('h2').click(function(){
    $(this).toggleClass('active');
    $(this).next().slideToggle();
  });

  $('#myDetails').jScrollPane({autoReinitialise: true});

  // Prevent accidental navigation away
  $('form#addMapDetails input').bind("change", function() { setConfirmUnload(true); }); 

  var count_img = $('#files li').length > 1 ? $('#files li').length : 1;
  var btnUpload = $('#upload');
  var status    = $('#status');
  var count_img_by_session = $('#files li').length > 1 ? true : false;
  new AjaxUpload(btnUpload, {
    action: '../upload-file.php',
    name: 'uploadfile',
    onSubmit: function(file, ext){
      if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                  // extension is not allowed 
        status.text('ไฟล์ที่คุณสามารถอัพโหลดได้คือ .jpg, .jpeg, .png และ .gif เท่านั้น');
        return false;
      }else if(count_img > 6){
        
        alert('คุณสามารถอัพโหลดรูปภาพได้สูงสุด 6 ภาพ');
        return false;
      }else{
        //alert(count_img);
      }
      status.text('Uploading...');
    },
    onComplete: function(file, response){
      //On completion clear the status
      status.text('');
      //Add uploaded file to list
      var imgstatus = response.split(',');
      
      if(imgstatus[0]==="success"){
        if(count_img%3 == 0 && count_img_by_session){
          $('<li></li>').appendTo('#files').html('<img src="../uploads/thumb-'+imgstatus[1]+'" alt="" /><input type="hidden" name="img[]" value="'+imgstatus[1]+'"/><span style="position:absolute;top:0;right:0;background-color: white;"><a class="delete-img ui-icon ui-icon-circle-close" data-img-name="'+imgstatus[1]+'"></a></span>').addClass('success').before('<br class="clear" />');
        }else if(count_img%3 == 0){
          $('<li></li>').appendTo('#files').html('<img src="../uploads/thumb-'+imgstatus[1]+'" alt="" /><input type="hidden" name="img[]" value="'+imgstatus[1]+'"/><span style="position:absolute;top:0;right:0;background-color: white;"><a class="delete-img ui-icon ui-icon-circle-close" data-img-name="'+imgstatus[1]+'"></a></span>').addClass('success').after('<br class="clear" />');
        }else{
          $('<li></li>').appendTo('#files').html('<img src="../uploads/thumb-'+imgstatus[1]+'" alt="" /><input type="hidden" name="img[]" value="'+imgstatus[1]+'"/><span style="position:absolute;top:0;right:0;background-color: white;"><a class="delete-img ui-icon ui-icon-circle-close" data-img-name="'+imgstatus[1]+'"></a></span>').addClass('success');
        }
        count_img++;
        
      } else{
        $('<li></li>').appendTo('#files').text(imgstatus[1]).addClass('error');
      }

    }
  });

  $('form').jqTransform({imgPath:'<?php echo  WEB_URL;?>/libraries/jqtransform/'});

  $('input:checkbox:not([safari])').checkbox();
  
  $('input:radio').checkbox();

  $('a.delete-img').live('click', function(){
    var img_name  = $(this).attr('data-img-name');
    var img_index = $(this).attr('data-index');
    var _this     = $(this);
    if(confirm('คุณมั่นใจหรือเปล่าว่าต้องการลบภาพนี้')){
      $.ajax({
        type: "POST",
        url: "admin_query.php",
        data: {delete_img:true, name:img_name, index:img_index},
        dataType: 'json',
        success: function(msg){     
          if(msg.status){     
            _this.closest('li').fadeOut('slow', function(){ $(this).remove(); });
          }else{
            alert('เกิดปัญหาขัดข้องไม่สามารถลบเนื้อหาได้');
          }
        }        
      });
    }
    return false
  });

  $('form#addMapDetails button#submitBtn').click(function(){
    $('form#addMapDetails').submit();
  });
  $('form#addMapDetails').submit(function(){
    // alert(dump($('form#addMapDetails').serializeArray()));
    var foundError = false;
    var firstEmptyInput = null;
    $(this).find('input.require').each(function(){
      if($(this).val() == ""){
        if(!$(this).hasClass('inputRequire')){
          $(this).closest('.jqTransformInputWrapper').addClass('inputRequire');
          foundError = true;
          if(firstEmptyInput == null) firstEmptyInput = $(this);
        }
      }
      if(firstEmptyInput != null)firstEmptyInput.focus();
    });

    if(!foundError){
      insertDataToBox();
    }else{
      setTimeout(function(){
        $('body').showMessage({
          'thisMessage':['กรุณากรอกข้อมูลในช่องสีแดงให้ครบ หรือคุณยังไม่ได้ปักหมุดในแผนที่'],
          'className':'failure',
          'displayNavigation':false,
          autoClose:false
        });
      },100);
    }
    return false;
  });

  $(".inline").colorbox({inline:true, height: "550px", width:"960px"});

  $('#addMapDetails .inputRequire input.require').live('blur', function(){
    if($(this).val() != ""){
      $(this).not('#startPrice').css('background','url(../images/checked.png) no-repeat 85%');
      $(this).closest('.jqTransformInputWrapper').removeClass('inputRequire');
    }
  });

  $('#myDetails').before('<div class="slidePane"></div>');

  var myDetailsHeight = 600;
  $(".slidePane").click(function (e) {
    e.preventDefault();
    $(this).next("#myDetails").css({height: myDetailsHeight}); 
    $(this).next("#myDetails").slideToggle("slow") 
    .siblings("#myDetails").slideUp("slow");
    $(this).toggleClass('active'); 
  });

  $("#addMapDetails input#startPrice, #addMapDetails input#endPrice").keydown(function(event){  
    // Allow: backspace, delete, tab and escape
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 
      // Allow: Ctrl+A
      (event.keyCode == 65 && event.ctrlKey === true) || 
      // Allow: home, end, left, right
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      // let it happen, don't do anything
      return;
    }else{
      // Ensure that it is a number and stop the keypress
      if ( event.shiftKey|| (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ) ) 
      {
        event.preventDefault(); 
      }
    }
  });
});

function tester(){
  var form = $('#addMapDetails');
  form.find('#place_name').val('Place Name');
  form.find('#startPrice').val(12345);
  form.find('#endPrice').val(67890);
  form.find('#address').val('Address1');
  form.find('#city').val('Muang');
  form.find('#state').val('Khonkean');
  form.find('#zip').val(40000);
  form.find('#description').val('The place nearby Central, Bars, Market Place etc.');
  form.find('#mainPhone').val('0874352540');
  form.find('#secondaryPhone').val('0903510970');
  form.find('#email').val('user@example.com');
  form.find('#website').val('http://www.google.com');
  form.find('#startWorking').val('08.00');
  form.find('#endWorking').val('23.30');
  form.find('input:checkbox').each(function(){$(this).click();});
}
</script>

<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="leftside">
        <?php require_once("menu.php");?>
      </td>
      <td class="rightside">
        <div class="box" style="margin-left:10px; margin-right: 10px; float:left;">
          <div id='title_menu' class="ui-corner-top">เพิ่มข้อมูล  <a href="#" onclick="tester(); return false;">Test input</a></div>
          <div class="content" style="min-height: 150px;">
            <div id="myMap" style="width:100%; height:600px;"></div>
            <label for="zoom" id="zoomLabel">
              <input type="text" name="zoom" class="zoom" />
              Zoom
            </label>

            <label for="lat" id="latLabel">
              <input type="text" name="lat" class="lat" />
              Latitude
            </label>
            
            <label for="lng" id="lngLabel">
              <input type="text" name="lng" class="lng" />
              Longitude
            </label>
            <ul id="mapTools">
              <li><div id="hand_b" onclick="stopEditing();"/></li>
              <li><div id="placemark_b" onclick="placeMarker()"/></li>
              <!-- <li><div id="line_b" onclick="startLine()"/></li> -->
              <!-- <li><div id="shape_b" onclick="startShape()"/></li>  -->
            </ul>
            
            <div id="myDetails">
              <form id="addMapDetails" action="">
                <div id="accordion-js" class="accordion">
                  <h2 class="active">ข้อมูลพื้นฐาน *</h2>
                  <p style="display: block;" id="main_info_section">
                    <!-- <label for="condo">Condo</label>
                    <input type="radio" name="types" id="condo" />
                    <label for="domitory">Domitory</label>
                    <input type="radio" name="types" id="domitory" />
                    <label for="room">Room</label>
                    <input type="radio" name="types" id="room" /> -->
                    <label for="forRent">For Rent
                      <input type="checkbox" name="forRent" id="forRent" checked="checked" value="For Rent"/>
                    </label>
                    <label for="forSale">For Sale
                      <input type="checkbox" name="forSale" id="forSale" value="For Sale"/>
                    </label>
                    <br class="clear" />
                    <label for="categories">Catetories</label> 
                    <select name="categories" id="categories">
                      <option value="hotel">Hotel</option>
                      <option value="condo">Condo</option>
                      <option value="domitory">Domitory</option>
                      <option value="room">Room</option>
                      <option value="home">Home</option>
                      <option value="sublet">Sublet</option>
                      <option value="apartment">Apartment</option>
                      <option value="bangalow">Bungalow</option>
                      <option value="motel">Motel</option>
                    </select>
                    <br class="clear" />
                    <label for="place_name">Place Name</label>
                    <input type="text" name="place_name" id="place_name" class="require" placeholder="Place Name" size="31" />
                    <br class="clear" style="line-height: 65px;" />
                    <label for="startPrice">Price</label>
                    <input type="text" name="startPrice" id="startPrice" class="require" placeholder="12345" size="9" />

                    <label for="endPrice" style="margin-left:1px;margin-right:1px;">-</label>
                    <input type="text" name="endPrice" id="endPrice" placeholder="67890" size="9" /> 
                    
                    <select name="monetary" id="monetary" style="width:20px;">
                      <option value="baht" selected="selected">&#3647;</option>
                      <option value="usDalla">$</option>
                      <option value="pound">&pound;</option>
                      <option value="yen">&yen;</option>
                      <option value="euro">&euro;</option>
                    </select> <br class="clear" />

                    <label for="address">Address</label>
                    <input type="text" name="address" id="address" class="require" placeholder="Address" size="31" />

                    <label for="town">City</label>
                    <input type="text" name="city" id="city" class="require" placeholder="City" size="31" />

                    <label for="state">State</label>
                    <input type="text" name="state" id="state" class="require" placeholder="State" size="31">

                    <label for="zip">Zipcode</label>
                    <input type="text" name="zip" id="zip" class="require" placeholder="Zipcode" size="31">

                    <label for="description">Description</label>
                    <textarea cols="47" rows="5" name="description" id="description" placeholder="Description"></textarea>
                  </p>
                  <h2>ข้อมูลติดต่อ</h2>
                  <p style="display: none; " id="contact_info_section">
                    <label for="mainPhone">Main Phone
                      <input type="text" name="mainPhone" id="mainPhone" placeholder="081 234 5678" size="31" />
                    </label>
                    
                    <label for="secondaryPhone">Secondaly Phone
                      <input type="text" name="secondaryPhone" id="secondaryPhone" placeholder="098 765 4321" size="31" />
                    </label>
                    
                    <label for="email">Email
                      <input type="text" name="email" id="email" placeholder="user@example.com" size="31" />
                    </label>
                    
                    <label for="website">Website
                      <input type="text" name="website" id="website" placeholder="http://www.example.com/" size="31" />
                    </label>
                  </p>
                  <h2>เวลาทำงาน</h2>
                  <p style="display: none; " id="working_time_section">
                    <label for="startWorking">Start</label>
                    <input type="text" name="startWorking" id="startWorking" placeholder="08:00 am" size="10" />

                    <label for="endWorking" style="margin:0 4px;">to</label>
                    <input type="text" name="endWorking" id="endWorking" placeholder="02:00 am" size="10" />
                  </p>
                  <h2>วิธีชำระเงิน</h2>
                  <div style="display: none; " id="transfer_methods_section">
                    <table border="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="150"><label for="transfer">Transfer</label></td>
                          <td><input type="checkbox" name="transfer" id="transfer" data-value="Transfer" /></td>
                        </tr>
                        <tr>
                          <td><label for="crash">Crash</label></td>
                          <td><input type="checkbox" name="crash" id="crash" data-value="Crash" /></td>
                        </tr>
                        <tr>
                          <td><label for="counterService">Counter Service</label></td>
                          <td><input type="checkbox" name="counterService" id="counterService" data-value="Counter Service" /></td>
                        </tr>
                        <tr>  
                          <td><label for="sevenElevent">Seven Eleven</label></td>
                          <td><input type="checkbox" name="sevenElevent" id="sevenElevent" data-value="711" /></td>
                        </tr>
                        <tr>
                          <td><label for="americanExpress">American Express</label></td>
                          <td><input type="checkbox" name="americanExpress" id="americanExpress" data-value="American Express" /></td>
                        </tr>
                        <tr>
                          <td><label for="visa">Visa</label></td>
                          <td><input type="checkbox" name="visa" id="visa" data-value="Visa" /></td>
                        </tr>
                        <tr>
                          <td><label for="masterCard">Master Card</label></td>
                          <td><input type="checkbox" name="masterCard" id="masterCard" data-value="Master Card" /></td>
                        </tr>
                        <tr>
                          <td><label for="otherTransfer">Other</label></td>
                          <td><input type="checkbox" name="otherTransfer" id="otherTransfer" data-value="Other" /></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <h2>รายละเอียดเพิ่มเติม</h2>
                  <div style="display: none; " id="more_info_section">
                    <table border="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td width="150"><label for="carPark">Car Park</label></td>
                          <td><input type="checkbox" name="carPark" id="carPark" data-value="Car Park"/></td>
                        </tr>
                        <tr>
                          <td><label for="cctv">CCTV</label></td>
                          <td><input type="checkbox" name="cctv" id="cctv" data-value="CCTV" /></td>
                        </tr>
                        <tr>
                          <td><label for="pool">Pool</label></td>
                          <td><input type="checkbox" name="pool" id="pool" data-value="Pool" /></td>
                        </tr>
                        <tr>
                          <td><label for="airConditioner">Air Conditioner</label></td>
                          <td><input type="checkbox" name="airConditioner" id="airConditioner" data-value="Air Conditioner" /></td>
                        </tr>
                        <tr>
                          <td><label for="tv">TV</label></td>
                          <td><input type="checkbox" name="tv" id="tv" data-value="TV"/></td>
                        </tr>
                        <tr>
                          <td><label for="fride">Fride</label></td>
                          <td><input type="checkbox" name="fride" id="fride" data-value="Fride" /></td>
                        </tr>
                        <tr>
                          <td><label for="internet">Internet</label></td>
                          <td><input type="checkbox" name="internet" id="internet" data-value="Hispeed Internet" /></td>
                        </tr>
                        <tr>
                          <td><label for="telephone">Telephone</label></td>
                          <td><input type="checkbox" name="telephone" id="telephone" data-value="Telephone"/></td>
                        </tr>
                        <tr>
                          <td><label for="waterHeater">Water Heater</label></td>
                          <td><input type="checkbox" name="waterHeater" id="waterHeater" data-value="Water Heater"/></td>
                        </tr>
                        <tr>
                          <td><label for="breakfast">Breakfast</label></td>
                          <td><input type="checkbox" name="breakfast" id="breakfast" data-value="Breakfast" /></td>
                        </tr>
                        <tr>
                          <td><label for="kitchen">Kitchen</label></td>
                          <td><input type="checkbox" name="kitchen" id="kitchen" data-value="Kitchen" /></td>
                        </tr>
                        <tr>
                          <td><label for="livingRoom">Living Room</label></td>
                          <td><input type="checkbox" name="livingRoom" id="livingRoom" data-value="Living Room" /></td>
                        </tr>
                        <tr>
                          <td><label for="terrace">Terrace</label></td>
                          <td><input type="checkbox" name="terrace" id="terrace" data-value="Terrace" /></td>
                        </tr>
                        <tr>
                          <td><label for="cableTv">Cable TV</label></td>
                          <td><input type="checkbox" name="cableTv" id="cableTv" data-value="Cable TV" /></td>
                        </tr>
                        <tr>
                          <td><label for="elevator">Elevator</label></td>
                          <td><input type="checkbox" name="elevator" id="elevator" data-value="Elevator" /></td>
                        </tr>
                        <tr>
                          <td><label for="keyCard">Key Card</label></td>
                          <td><input type="checkbox" name="keyCard" id="keyCard" data-value="Key Card" /></td>
                        </tr>
                        <tr>
                          <td><label for="garage">Garage</label></td>
                          <td><input type="checkbox" name="garage" id="garage" data-value="Garage" /></td>
                        </tr>
                        <tr>
                          <td><label for="roomService">Room Service</label></td>
                          <td><input type="checkbox" name="roomService" id="roomService" data-value="Room Service" /></td>
                        </tr>
                        <tr>
                          <td><label for="petAllowed">Pets Allowed</label></td>
                          <td><input type="checkbox" name="petAllowed" id="petAllowed" data-value="Pet Allowed" /></td>
                        </tr>
                        <tr>
                          <td><label for="singleBed">Single Bed</label></td>
                          <td><input type="checkbox" name="singleBed" id="singleBed" data-value="Single Bed" /></td>
                        </tr>
                        <tr>
                          <td><label for="doubleBeds">Double Beds</label></td>
                          <td><input type="checkbox" name="doubleBeds" id="doubleBeds" data-value="Double Beds" /></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <h2>ภาพถ่าย</h2>
                  <div style="display: none; " id="images_section">
                    <div id="upload" style="width:104%;"><span>อัพโหลดรูป</span></div>
                    <?php //unset($_SESSION['CURRENT_IMG']);?>
                    <ul id="files" >
                    <?php
                      $pic_num = (isset($_SESSION['CURRENT_IMG']) && $_SESSION['CURRENT_IMG'][0] != "no_pic.gif")? count($_SESSION['CURRENT_IMG']):0;
                      if($pic_num != 0){
                        foreach($_SESSION['CURRENT_IMG'] as $key => $value){
                          if($key%3 == 0 && $key != 0){
                            echo '<br class="clear" />';
                            echo '<li><img src="'.WEB_URL.'/uploads/'.$value.'" /><input type="hidden" name="img[]" value="'.$value.'" /><span style="position:absolute;top:0;right:0;background-color: white;"><a class="delete-img ui-icon ui-icon-circle-close" data-img-name="'.$value.'" data-index="'.$key.'" ></a></span></li>';
                          }else{
                            echo '<li><img src="'.WEB_URL.'/uploads/'.$value.'" /><input type="hidden" name="img[]" value="'.$value.'" /><span style="position:absolute;top:0;right:0;background-color: white;"><a class="delete-img ui-icon ui-icon-circle-close" data-img-name="'.$value.'" data-index="'.$key.'" ></a></span></li>';
                          }
                        }
                      }
                    ?>
                    </ul>
                  </div>
                </div>
                <input type="hidden" name="lat" class="lat require" />
                <input type="hidden" name="lng" class="lng require" />
                <input type="hidden" name="zoom" class="zoom require" />
                <input type="button" name="submitBtn" id="submitBtn" value="ส่งข้อมูล" />
              </form>
            </div>
          </div>
          </div>            
        </td>
    </tr>
  </tbody>
</table>
<div style='display:none'>
  <a class="inline" href="#inline_content"></a>
  <div id='inline_content' style='padding:10px; background:#fff;'>
    <h2 class="placeName"></h2>
    <ul class="columnList">
      <li>
        <div class="placeDetails main_info_section">
          <dl>
            <dt>ที่อยู่</dt>
          </dl>
        </div>
      </li>
      <li>
        <div class="placeDetails contact_info_section">
          <dl>
            <dt>ข้อมูลติดต่อ</dt>
          </dl>
        </div>
      </li>
      <li>
        <div class="placeDetails working_time_section">
          <dl>
            <dt>เวลาทำงาน</dt>
          </dl>
        </div>
      </li>
      <li>
        <div class="placeDetails transfer_methods_section">
          <dl>
            <dt>วิธีการชำระเงิน</dt>
          </dl>
        </div>
      </li>
    </ul>
    <br class="clear" />
    <div class="more_options">
      <div class="placeDetails more_info_section">
        <dl>
          <dt>สิ่งอำนวยความสะดวก</dt>
        </dl>
      </div>
    </div>
    <div class="place_gallery">
      <h2>รูปภาพเพิ่มเติม</h2>
      <ul class="imageList">
      </ul>
    </div>
  </div>
</div>